<template>
  <div class="wrap">
    <!-- <div class="aa">
      <div class="aa-title">
        <img
          :src="require('@/assets/img/home-10.png')"
          style="width: 20px; height: 22px; margin-right: 7px"
        />
        <div class="aa-name">广阿斯顿发的说法东省</div>
        <img
          :src="require('@/assets/img/home-17.png')"
          style="width: 25px; height: 25px"
        />
      </div>
      <div class="aa-content">
        公厕总数：<span class="aa-count">95929</span>
      </div>
    </div> -->
    <div class="map-container" ref="myChartChina"></div>
    <div class="title">
      全国公厕总数
      <div class="count">{{ allCount }}</div>
    </div>
  </div>
</template>
<script>
import chinaMapData from "./chinaMapData";

export default {
  props: {
    chinaData: {
      type: Array,
      require: true,
      default: () => [],
    },
    province: {
      type: String,
      require: true,
      default: () => "",
    },
  },
  data() {
    return {
      myChartChina: null,
      allCount: undefined,
    };
  },
  watch: {
    chinaData: {
      handler(newVal, oldVal) {
        const { myChartChina, province } = this;
        if (myChartChina && Array.isArray(newVal)) {
          var option = myChartChina.getOption();
          option.series[0].data = newVal;
          myChartChina.setOption(option);
          let allCount = 0;
          for (let i = 0; i < newVal.length; i++) {
            allCount += Number(newVal[i].count);
          }
          this.allCount = allCount;
          if (province) {
            this.setChatAction(province);
          }
        }
      },
      deep: true,
    },
  },
  mounted() {
    var domImg;
    var domImgHover;
    function aa() {
      return new Promise((resolve, reject) => {
        resolve();
        return;
        domImg = document.createElement("img");
        domImg.src = require("@/assets/img/domImg.jpeg");
        domImg.onload = function () {
          resolve();
        };
        domImg.onerror = (e) => {
          reject(e);
          domImg = null;
        };
      });
    }
    function bb() {
      return new Promise((resolve, reject) => {
        resolve();
        return;
        domImgHover = document.createElement("img");
        domImgHover.src = require("@/assets/img/domImgHover.jpeg");
        domImgHover.onload = function () {
          resolve();
        };
        domImgHover.onerror = (e) => {
          reject(e);
          domImgHover = null;
        };
      });
    }
    //注册地图
    this.$echarts.registerMap("china", chinaMapData);
    let dom = this.$refs.myChartChina;
    window.closeTooltip = (name) => {
      myChartChina.dispatchAction({
        type: "hideTip",
        seriesIndex: 0,
        name,
      });
    };
    this.myChartChina = this.$echarts.init(dom);
    Promise.all([aa(), bb()]).then(() => {
      this.myChartChina.setOption({
        baseOption: {
          tooltip: {
            triggerOn: "none",
            formatter: function (params) {
              // console.log(params);
              //  <img
              //             src="${require("@/assets/img/home-17.png")}"
              //             click="closeTooltip(${params.data.name})"
              //             style="width: 25px; height: 25px"
              //           />
              return ` <div class="aa">
                      <div class="aa-title">
                        <img
                          src="${require("@/assets/img/home-10.png")}"
                          style="width: 20px; height: 22px; margin-right: 7px"
                        />
                        <div class="aa-name">${params.data.name}</div>
                      </div>
                      <div class="aa-content">
                        公厕总数：<span class="aa-count">${
                          params.data.count
                        }</span>
                      </div>
                    </div>`;
            },
            alwaysShowContent: true,
            appendToBody: true,
            // 额外附加的阴影
            backgroundColor: "",
            borderColor: "",
            padding: 0,
          },
          //地图
          geo: {
            map: "china",
            show: true,

            //是否开启鼠标缩放和平移漫游
            roam: false,
            zoom: 1.1,
            selectedMode: "single",
            aspectScale: 0.78,
            center: [103.83531246, 30.0267395887],

            label: {
              emphasis: {
                show: false,
              },
            },
            select: {
              label: {
                show: false,
              },
            },

            itemStyle: {
              normal: {
                borderColor: "#26FEF6",
                borderWidth: 1,
                areaColor: "#1f67d3 ",
                // color: {
                //   image: domImg,
                //   repeat: "repeat",
                // },
                shadowColor: "rgba(13, 55, 127, 1)",
                shadowOffsetX: 0,
                shadowOffsetY: 20,
                shadowBlur: 30,
              },
              emphasis: {
                borderColor: "#26FEF6",
                borderWidth: 1,
                areaColor: "#33fdff",
                // color: {
                //   image: domImgHover,
                //   repeat: "repeat",
                // },
              },
            },
            // 这里是重点！！！
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
            ],
          },
          series: [
            {
              name: "地域分布",
              type: "map",
              geoIndex: 0,
              data: this.chinaData,

              select: {
                itemStyle: {
                  areaColor: "",
                },
              },
            },
          ],
        },
        options: [],
      });
      this.myChartChina.on("click", (param) => {
        const { seriesType, seriesName, name } = param;
        if (seriesType === "map" && seriesName === "地域分布") {
          this.setChatAction(name);
          this.$emit("change-province", name);
        }
      });
    });
  },
  methods: {
    setChatAction(name) {
      const { myChartChina } = this;
      myChartChina.dispatchAction({
        type: "highlight", // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
        name,
      });
      myChartChina.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        name,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  .title {
    position: absolute;
    z-index: 1;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #def1ff;

    .count {
      font-size: 30px;
      font-weight: bold;
      color: #26fbf3;
      margin-left: 10px;
    }
  }

  .map-container {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.aa {
  position: relative;
  width: 248px;
  height: 106px;
  box-sizing: border-box;
  padding: 14px 0px 0px 14px;
  background: rgba(6, 14, 44, 0.8);
  border: 1px solid #1a7683;
  .aa-title {
    height: 41px;
    padding: 0px 16px 0px 20px;
    background: rgba(25, 103, 131, 0.1);
    font-size: 19px;
    font-weight: bold;
    color: #f0f0f0;
    display: flex;
    align-items: center;
    .aa-name {
      flex: 1;
      text-align: left;
    }
  }
  .aa-content {
    margin-top: 13px;
    font-size: 16px;
    color: #26fbf3;
    display: flex;
    align-items: center;
    justify-content: center;
    .aa-count {
      font-size: 23px;
      font-weight: 500;
    }
  }

  &::after {
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 5px;
    height: 9px;
    background: #44defd;
  }
  &::before {
    content: " ";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 5px;
    height: 9px;
    background: #44defd;
  }
}
</style>